<template>
  <div style="width: 1200px; margin: 0 auto;padding-top:20px">敬请期待!</div>
  <!-- <div class="coursesTemplate">
    <div
      class="course"
      :class="{ latelyOpen: item.latelyOpen }"
      v-for="(item, index) in getCoursesData"
      :key="index"
      :style="{
        'margin-right': (index + 1) % 4 === 0 ? '0' : '20px',
      }"
      @click="handelJumpRoute(item)"
    >
      <div class="latelyIconBox" v-if="item.latelyOpen">
        <img
          :src="require('@/assets/images/latelyIcon.png')"
          title="最近打开"
        />
      </div>
      <div class="addCourse" v-if="index === 0">
        <div>
          <img :src="require('@/assets/images/bigAddcourse.png')" />
        </div>
        <div class="title">新建模板</div>
      </div>
      <div class="containerBox" v-if="!item.createCourses">
        <div class="iconBox">
          <img :src="'https://codelover.club' + item.iconPath" />
        </div>
        <div class="courseName">
          {{ item.name }}
        </div>
        <div class="courseDesc">创作者：</div>
        <div class="courseDesc">创作团队：</div>
        <div class="courseInfo">
          <div class="desc">简介：{{ item.name }}简介</div>
        </div>
        <div class="time">修改时间：2021-04-08 10:53:45</div>
      </div>
    </div>
  </div> -->
</template>

<script>
// import { getDesigncourselist } from "@/request/designcourse";
// export default {
//   data() {
//     return {
//       latelyOpen: [],
//       coursesData: [],
//     };
//   },
//   created() {
//     this.fetchCurriculumlist();
//   },
//   computed: {
//     getCoursesData() {
//       var nData = this.coursesData;
//       nData.unshift({ createCourses: true });
//       return nData;
//     },
//   },
//   methods: {
//     // 获取可选修课程
//     fetchCurriculumlist() {
//       getDesigncourselist().then((res) => {
//         res.data.courseList.reverse();
//         res.data.courseList.map((item, index) => {
//           if (index <= 6) {
//             this.$set(item, "latelyOpen", true);
//           }
//         });
//         this.coursesData = res.data.courseList;
//       });
//     },
//     // 跳转课程创作页面
//     handelJumpRoute(item) {
//       this.$router.push({
//         name: "Creativeourse",
//         query: {
//           templateID: item.courseID,
//         },
//       });
//     },
//     handelCoursesDetail(item) {
//       this.$router.push({
//         name: "Coursedetail",
//         query: { courseId: item.courseID, currNo: item.currNo },
//       });
//     },
//   },
// };
</script>

<style lang="stylus">
.coursesTemplate {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;

  .course {
    cursor: pointer;
    margin-right: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 25px;
    width: 285px;
    height: 340px;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(79, 111, 139, 0.16);
    border-radius: 5px;
    overflow: hidden;

    .addCourse {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

      .title {
        margin-top: 64px;
        font-family: PMingLiU-ExtB;
        font-size: 22px;
        color: rgba(129, 129, 129, 0.63);
      }
    }

    .containerBox {
      padding: 17px 15px 0;

      .iconBox {
        width: 255px;
        height: 146px;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
      }

      .courseName {
        margin-top: 7px;
        display: inline-block;
        line-height: 27px;
        font-family: PMingLiU-ExtB;
        font-weight: bold;
        font-size: 20px;
        color: #333333;
      }

      .courseDesc {
        margin-top: 5px;
        line-height: 19px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #999999;
      }

      .courseInfo {
        margin-top: 9px;
        line-height: 19px;
        display: flex;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #666666;

        .desc {
          margin: 0 10px;
          position: relative;
        }

        .desc:first-child {
          margin-left: 0;
        }

        .desc:last-child {
          margin-right: 0;
        }

        .desc::after {
          position: absolute;
          content: '';
          top: 1.5px;
          right: -10px;
          height: 15px;
          width: 1px;
          background: #666666;
        }

        .desc:last-child::after {
          content: none;
        }
      }

      .time {
        margin-top: 9px;
        line-height: 19px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #666666;
      }
    }
  }

  .latelyOpen {
    position: relative;

    .latelyIconBox {
      position: absolute;
      right: 5px;
      top: 5px;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
